<template>
    <div class="wrapper">
        <!-- 基本信息 -->
        <div class="base_div">
            <!-- 用户信息 -->
            <el-card class="box-card m-t">
                <template #header>
                    <div class="card-header">
                        <span>门店基础信息</span>
                    </div>
                </template>
                <el-col :span="12" v-for="(item,index) in state.baseArr" :key="index">
                    {{item.title}}：{{item.info}}
                    <el-popover
                            placement="bottom"
                            :width="260"
                            trigger="click"
                            v-if="item.edit==true"
                            v-model:visible="item.is_show"
                    >
                        <el-input placeholder="请输入" v-model="state.this_input">
                            <template #append>
                                <el-button @click.native.prevent="submit_base(item)">保存</el-button>
                            </template>
                        </el-input>
                        <template #reference>
                            <button class="button-edit" @click.native.prevent="editShowFun(item)">编辑</button>
                        </template>
                    </el-popover>
                </el-col>

            </el-card>
            <!-- 门店其他信息 -->
            <el-card class="box-card m-t">
                <template #header>
                    <div class="card-header">
                        <span>门店其他信息</span>
                    </div>
                </template>
                <el-col :span="12" v-for="(item,index) in state.otherArr" :key="index">
                    <span v-if="item.title!=''">{{item.title}}：{{item.info}}</span>
                    <span v-else>&nbsp;</span>
                    <el-popover
                            placement="bottom"
                            :width="260"
                            trigger="click"
                            v-if="item.edit==true"
                            v-model:visible="item.is_show"
                    >
                        <el-input placeholder="请输入" v-model="state.this_input">
                            <template #append>
                                <el-button @click.native.prevent="submit_base(item)">保存</el-button>
                            </template>
                        </el-input>
                        <template #reference>
                            <button class="button-edit" @click="editShowFun(item)">编辑</button>
                        </template>
                    </el-popover>
                </el-col>

            </el-card>
        </div>
        <!-- 门店资料 -->
        <div class="static_div m-t">
            <el-card class="box-card">
                <div class="cart-title">门店资料</div>
                <div class="store-box">
                    <div v-for="(item,index) in state.storInfoArr" :key="index" class="store-item">
                        <span v-if="item.type=='img'">{{item.title}}：
                            <a :href="item.url" :download="item.des" target="_blank">{{item.des}}</a>
                        </span>
                        <span v-else>{{item.title}}：{{item.des}}</span>
                    </div>
                </div>
            </el-card>
        </div>
        <!-- 门店销售数据 -->
        <div class="static_div m-t">
            <el-card class="box-card">
                <div class="cart-title">门店销售数据</div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {reactive} from "vue";

    export default {
        name:"store_detail",
        components: {},
        setup() {
            let state = reactive({
                this_input: '',
                edit_show: false,
                baseArr: [
                    {
                        title: '门店编号',
                        info: '123007',
                        edit: true,
                        type: 'input',
                        is_show: false,
                        // obj:{
                        //     url:'',
                        //     id:"",
                        //     sos:''
                        // }
                    },
                    {
                        title: '进货等级',
                        info: '初始会员',
                        edit: true,
                        type: 'select',
                        is_show: false
                    },
                    {
                        title: '用户账户',
                        info: '海燕',
                        edit: true,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '用户名',
                        info: '海燕',
                        edit: true,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '掌柜名称',
                        info: '海燕',
                        edit: true,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '联系电话',
                        info: '15222636663',
                        edit: false,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '创建人',
                        info: '海燕',
                        edit: false,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '创建时间',
                        info: '2021-05-06',
                        edit: false,
                        type: 'input',
                        is_show: false
                    },
                    {
                        title: '所在地区',
                        info: '',
                        edit: true,
                        type: 'select',
                        is_show: false
                    },
                    {
                        title: '门店标签',
                        info: '',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '所属仓库',
                        info: '天津总仓',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '收货地址',
                        info: '海燕',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '冷运运费模板',
                        info: '冷运运费模板',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '常温运费模板',
                        info: '常温运费模板',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '账户余额',
                        info: '￥200',
                        edit: false,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '保证金',
                        info: '0',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '提现银行卡',
                        info: '未绑定',
                        edit: false,
                        type: 'input',
                        is_show: false,
                    }
                ],
                otherArr: [
                    {
                        title: '合同编号',
                        info: '123007',
                        edit: true,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '当前阶段',
                        info: '545',
                        edit: false,
                        type: 'input',
                        is_show: false,
                    },
                    {
                        title: '签约日期',
                        info: '2021-06-05',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '到期日期',
                        info: '2021-06-08',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '扣点开始日期',
                        info: '及时扣除',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '扣点比例',
                        info: '0',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '所属代理商',
                        info: '海燕',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '是否代理进货',
                        info: '是',
                        edit: false,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '代理商仓库进货',
                        info: '开',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '',
                        info: '',
                        edit: false,
                        type: '',
                        is_show: false
                    },
                    {
                        title: '客服专员',
                        info: '',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '运营经理',
                        info: '',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '运营专员',
                        info: '',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '销售专员',
                        info: '',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                    {
                        title: '备注',
                        info: '',
                        edit: true,
                        type: 'date',
                        is_show: false,
                    },
                ],
                storInfoArr: [
                    {
                        title: '饿了么店铺ID',
                        des: '2',
                        type: 'text'
                    }, {
                        title: '饿了么店铺名',
                        des: '饱了么',
                        type: 'text'
                    }, {
                        title: '美团店铺ID',
                        des: '151',
                        type: 'text'
                    }, {
                        title: '美团店铺名',
                        des: '2',
                        type: 'text'
                    }, {
                        title: '食堂营业额',
                        des: '￥263',
                        type: 'text'
                    }, {
                        title: '后厨照片',
                        des: 'shdfs.jpg',
                        type: 'img',
                        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.7v6.net%2Fuploads%2Fallimg%2F200417%2F141-20041F93144926.jpg&refer=http%3A%2F%2Fwww.7v6.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625304322&t=9fcf0c5a73d630bb106b47e8aeed6567"
                    }
                ],
            });

            //点击编辑
            function editShowFun(item) {
                state.this_input = item.info
            }

            //保存基础信息的更改
            function submit_base(item) {
                item.is_show = false
                item.info = state.this_input
            }

            return {
                state,
                submit_base,
                editShowFun
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .base_div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .box-card {
                width: 49%;
                padding-bottom: 10px;
                /deep/ .el-card__header {
                    padding: 10px;
                }
                /deep/ .el-card__body {
                    padding: 20px 0 20px 20px;
                }
                /deep/ .el-input-group__append {
                    cursor: pointer;
                }
                /deep/ .el-col-12 {
                    width: 50%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 12px;
                    /deep/ .el-popover.el-popper {
                        width: auto !important;
                    }
                    .button-edit {
                        padding-right: 10px;
                        margin-right: 30px;
                        background: transparent;
                        border: 0;
                        outline: none;
                        color: #05b7ff;
                        white-space: nowrap;
                    }
                }

            }
        }


        .m-t {
            margin-top: 10px;
        }
        .static_div {
            width: 100%;
            .cart-title {
                display: flex;
                margin-bottom: 15px;
            }
            .store-box{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .store-item{
                    width: 25%;
                    padding-bottom: 12px;
                }
            }
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
        }
    }
</style>